<template>
  <div class="list">
    <div class="hearder">
      <div class="item">
        <h1>新型冠状肺炎实时监测</h1>
        <p>当前时间：{{ timerr|dateTime }}</p>
      </div>
    </div>
    <div class="setion">
      <!-- 左侧 -->
      <list-left></list-left>
      <!-- 中 -->
      <list-center></list-center>
      <!-- 右 -->
      <list-right></list-right>
    </div>
  </div>
</template>

<script>
import listLeft from "@/components/list-left.vue";
import ListCenter from "@/components/list-center.vue";
import ListRight from "@/components/list-right.vue";
export default {
  components: { listLeft, ListCenter, ListRight },
  data() {
    return {
      timerr: new Date(),
    };
  },
  filters: {
    dateTime(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "年" + MM + "月" + d + "-" + h + "时" + m + "分" + s + "秒";
    },
  },
  mounted() {
    var that = this;
    this.timer = setInterval(() => {
      that.timerr = new Date(); //修改数据date
    }, 1000);
  },
  methods: {
    add() {},
  },
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
  color: white;
}
.list {
  width: 100%;
  height: 100%;
  background: url(../img/bg.a6333996.jpg) no-repeat #000;
  background-size: cover;
  .setion {
    width: 100%;
    height: 1000px;
    // background-color: red;
    display: flex;
  }
  .hearder {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../img/head_bg.eeff3da5.png) no-repeat;
    background-size: cover;
    .item {
      width: 98%;
      height: 80px;
      // background-color: #09133a;
      display: flex;
      align-items: center;
      justify-content: space-between;

      p {
        color: hsla(0, 0%, 100%, 0.7);
        font-size: 1.042vw;
      }
      h1 {
        color: white;
        margin-left: 690px;
        font-size: 1.979vw;
      }
    }
  }
}
</style>